<template>
    <div class="main-todo">
        <div class="add-todo">
            <input class="all" type="checkbox" :checked="!filterAll.length" @change="hanleAll" />
            <input @keyup.enter="addTodo" class="add" type="text" placeholder="what do you want to do?" autofocus />
        </div>
        <!-- 渲染过滤过的计算属性 all active complete -->
        <todo-item v-for="item in filterTodo" :key="item.id" :todo="item" @delete="handleDelete" @toggle="handleToggle"
            @contentChange="handleChange"></todo-item>
        <todo-info v-if="todos[0]" :total="total" @state="stateChange" @del="handleDelComp"></todo-info>
        <!-- 没有事做的时候就放松吧 -->
        <div v-else class="relax">It's nothing to do,enjoy youself.</div>
    </div>
</template>
<script setup>
import TodoInfo from './components/TodoInfo.vue'
import TodoItem from './components/TodoItem.vue'
// 导入uuid包
import { v4 as uuidv4 } from "uuid";
import { ref, computed, watchEffect } from 'vue'
// 获取时间的方法
function getCurrentTimeStr() {
    let currentDate = new Date();
    let year = currentDate.getFullYear().toString();
    let month = (currentDate.getMonth() + 1).toString();
    if (month.length === 1) {
        month = "0" + month;
    }
    let date = currentDate.getDate().toString();
    if (date.length === 1) {
        date = "0" + date;
    }
    let hour = currentDate.getHours().toString();
    if (hour.length === 1) {
        hour = "0" + hour;
    }
    let minute = currentDate.getMinutes().toString();
    if (minute.length === 1) {
        minute = "0" + minute;
    }
    let second = currentDate.getSeconds().toString();
    if (second.length === 1) {
        second = "0" + second;
    }

    return (
        year +
        "-" +
        month +
        "-" +
        date +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second
    );
}
//从本地存储创建todos响应对象
const todos = ref(JSON.parse(localStorage.getItem('todos') || '[]'))
//可见状态的响应对象
const state = ref('all')
// 状态持久化(检测todos.value变化及把数据放到localstorage)
watchEffect(() => {
    localStorage.setItem('todos', JSON.stringify(todos.value))
})
// 把对象渲染到列表
// 根据todo-info的信息来渲染
const filterTodo = computed(() => {
    switch (state.value) {
        case "all":
            return todos.value;
        case "active":
            return todos.value.filter((item) => item.completed == 0);
        case "completed":
            return todos.value.filter((item) => item.completed == 1);
    }
})
// 添加待办列表
function addTodo(e) {
    // 拿到输入框的数据
    const value = e.target.value.trim()
    if (value) {
        // 把数据放到前边
        todos.value.unshift({
            id: uuidv4(),
            content: value,
            completed: 0,
            created_time: getCurrentTimeStr(),
        })
        e.target.value = ''
    } else {
        alert("请输入待办内容");
    }
}
// 删除的方法
function handleDelete(todo) {
    todos.value.splice(todos.value.indexOf(todo), 1)
}
// 切换已完成的状态
function handleToggle(todo) {
    todos.value.forEach((item) => {
        if (item == todo) {
            item.completed = item.completed == 0 ? 1 : 0
        }
    })
}
// 更改列表项
function handleChange(todo, value) {
    todos.value.forEach((item) => {
        if (item == todo) {
            item.content = value
        }
    })
}
// 计算总数 
let total = computed(() => todos.value.filter((item) => item.completed == 0).length)
// 接收子组件传过来的状态切换
function stateChange(st) {
    state.value = st
    console.log(state.value);
}
// 删除已完成
function handleDelComp() {
    // 过滤已完成的
    todos.value = todos.value.filter((item) => item.completed == 0)
}
// 
const filterAll = computed(() => todos.value.filter((item) => item.completed == 0))
function hanleAll() {
    console.log(filterAll);//
    // 此处的计算属性也是响应式对象 必须得通过._value来获取
    //ComputedRefImpl {dep: Set(1), __v_isRef: true, __v_isReadonly: true, _dirty: false, _setter: ƒ, …}
    if (filterAll._value.length) {
        todos.value.forEach((item) => {
            item.completed = 1;
        })
    } else {
        todos.value.forEach((item) => {
            item.completed = 0;
        })
    }
}
</script>



<style lang="stylus">
@import '../../assets/styles/coms.styl';
</style>